<template>
	<view class="page-box">
		<view class="goods-item" v-for="(item, index) in goodsList" :key="item.goodsId">
			<!-- 商品图片 -->
			<view class="goods-image" @click="viewItem(item)">
				<image :src="item.image.split(',')[0]" mode="aspectFill"></image>
			</view>

			<!-- 商品信息 -->
			<view class="goods-info">
				<view class="goods-title u-line-2">{{ item.goodsName }}</view>
				<view class="goods-price">¥{{ item.price }}</view>

				<view class="goods-desc u-line-2">订单生成时间：{{ item.orderCreated.substring(0, 16).replace("T"," ")}}</view>


				<!-- 操作按钮区域 -->
				<view class="action-buttons">
					<button class="btn" @click="viewItem(item)">查看</button>

					<!-- <button class="btn" @click="commentItem(item)">评论</button> -->
				</view>
			</view>
		</view>
	</view>
	<u-loadmore :status="loadStatus" :icon-type="iconType" :load-text="loadText" />
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue'

	import {

		toggleApi,
		CartListApi
	} from '../../api/cart.js'
	import {
		getSalesOrderListApi
	} from '../../api/order.js'

	import {
		onReady,
		onReachBottom
	} from '@dcloudio/uni-app';
	const loadStatus = ref('loadmore')
	// 加载状态配置
	const iconType = ref('circle')
	const loadText = ref({
		loadmore: '上拉加载更多',
		loading: '正在加载...',
		nomore: '已经到底啦~'
	})
	// 商品数据
	const goodsList = ref([])
	const currentPage = ref(1)
	const pageSize = ref(10)
	const pages = ref(0)
	// 查询参数
	const query = reactive({
		currentPage: 1,
		pageSize: 10,
		userId: uni.getStorageSync('userId')
	})
	const getGoodsList = async () => {
		loadStatus.value = 'loading'
		const res = await getSalesOrderListApi(query)
		console.log(res)
		if (res && res.code == 200) {
			pages.value = res.data.pages
			goodsList.value = goodsList.value.concat(res.data.records)
			loadStatus.value = res.data.current < res.data.pages ? 'loadmore' : 'nomore'
		}
	}

	const viewItem = (item) => {
		console.log(item)
		console.log(item.goodsId)
		uni.navigateTo({
			url: `/pages/detail/detail?goods=` + JSON.stringify(item)
		})
	}
	const commentItem = (item) => {
		uni.navigateTo({
			url: `/pages/addComment/addComment?goods=` + JSON.stringify(item)
		})
	}

	// 加载更多
	const loadMore = () => {
		if (loadStatus.value === 'loadmore') {
			query.currentPage++ // 统一使用query.currentPage
			getGoodsList()
		}
	}
	onReady(() => {
		getGoodsList()
	})
	onReachBottom(() => {
		loadMore()
	})
</script>

<style lang="scss" scoped>
	.page-box {
		padding: 20rpx;
		background-color: #f7f7f7;
	}

	.goods-item {
		background-color: #fff;
		border-radius: 16rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
		margin-bottom: 20rpx;
	}

	.goods-image {
		width: 100%;
		height: 400rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.goods-info {
		padding: 20rpx;

		.goods-title {
			font-size: 32rpx;
			line-height: 1.4;
			color: #333;
			margin-bottom: 12rpx;
		}

		.goods-price {
			font-size: 36rpx;
			color: #ff2e4d;
			font-weight: bold;
			margin-bottom: 12rpx;
		}

		.goods-desc {
			font-size: 26rpx;
			color: #666;
			line-height: 1.4;
			margin-bottom: 20rpx;
		}
	}

	.action-buttons {
		display: flex;
		flex-wrap: wrap;
		gap: 10rpx;
		margin-top: 20rpx;

		.btn {
			flex: 1;
			min-width: 120rpx;
			height: 60rpx;
			line-height: 60rpx;
			font-size: 24rpx;
			padding: 0;
			margin: 0;
			border-radius: 8rpx;
			background-color: #f5f5f5;
			color: #333;

			&:active {
				opacity: 0.7;
			}

			&:nth-child(1) {
				background-color: #e6f7ff;
				color: #1890ff;
			}

			&:nth-child(2) {
				background-color: #fff7e6;
				color: #fa8c16;
			}

			&:nth-child(3) {
				background-color: #fff1f0;
				color: #f5222d;
			}

			&:nth-child(4) {
				background-color: #f6ffed;
				color: #52c41a;
			}
		}
	}
</style>